import { memo } from 'react';
import type { ReactNode, FC } from 'react';
import { PasswordLoginWrapper } from './style';
import { Form, Input, Select } from 'antd';
import { phoneLoginByPassword } from '../../service/login';
const { Option } = Select;
interface IProps {
  children?: ReactNode;
  setStatus: (val: string) => void;
  setOpen: () => void;
}

const PasswordLogin: FC<IProps> = (props) => {
  const [form] = Form.useForm();
  const { setStatus, setOpen } = props;
  const prefixSelector = (
    <Form.Item name="prefix" noStyle>
      <Select style={{ width: 70 }} defaultValue="86">
        <Option value="86">+86</Option>
        <Option value="87">+87</Option>
      </Select>
    </Form.Item>
  );
  async function handleLogin() {
    const value = form.getFieldsValue();
    const res = await phoneLoginByPassword(value);
    if (res.data.code === 200) {
      setOpen();
    }
  }
  return (
    <PasswordLoginWrapper>
      <div className="content">
        <Form>
          <Form.Item name="phone" rules={[{ required: true, message: '请输入手机号' }]}>
            <Input addonBefore={prefixSelector} style={{ width: '100%' }} placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
            <Input type="password" placeholder="请输入密码" />
            <a
              href="javascript:void(0)"
              className="forget"
              onClick={() => {
                setStatus('forget');
              }}
            >
              忘记密码?
            </a>
          </Form.Item>
        </Form>
        <div className="ctrl">
          <a
            href="javascript:void(0)"
            onClick={() => {
              setStatus('captcha');
            }}
          >
            短信登录
          </a>
          <label>
            <input type="checkbox" />
            自动登录
          </label>
        </div>
        <div className="sprite_button login">
          <a href="javascript:void(0)" className="sprite_button" onClick={handleLogin}>
            登录
          </a>
        </div>
      </div>
      <div className="another-login">
        <a
          href="javascript:void(0)"
          onClick={() => {
            setStatus('another');
          }}
        >
          {'<  其他登录方式'}
        </a>
      </div>
    </PasswordLoginWrapper>
  );
};

export default memo(PasswordLogin);
